<template>
	<view class="container">
		<view style="padding-top: 30rpx;" v-if="!isCurrentUser">
			<jc-button @click='lastGradeTap' title='上一级' width='600' height='88' backgroundColor="#d4a781" ></jc-button>
		</view>
		<view class="item2">
			<view class="item2_content" @click="userTap(item)" v-for="(item, index) in dataList" :key='index'>
				<view class="item" v-if="item.code">会员ID：{{item.code}}</view>
				<view class="item" v-if="item.parentModel.code == userInfo.code">会员手机号：{{item.phone}}</view>
				<view class="item" v-if="item.rank">身份：{{item.rankModel.name}}</view>
				<view class="item" v-if="item.parent">推荐人ID：{{item.parentModel.code}}</view>
				<view class="item" v-if="item.teamModel">团队级别：{{item.teamModel.name}}</view>
				<text class="item">个人消费：{{item.selfPerformance}}</text>
				<text class="item">直推业绩：{{item.verticalPerformance}}</text>
				<text class="item">团队业绩：{{item.teamPerformance}}</text>
				<view class="item" v-if="item.createTime">注册时间：{{$time.dateFormat('YYY-MM-DD hh:mm:ss', item.createTime)}}</view>
				<view class="item" v-if="item.upRankTime">升级时间：{{$time.dateFormat('YYY-MM-DD hh:mm:ss', item.upRankTime)}}</view>
			</view>
		</view>
		<u-empty text="暂无数据" mode="list" margin-top='300' v-if='showEmpty'></u-empty>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
import { common } from '../../api/common'
	export default{
		components: {},
		data() {
			return {
				page: 1,
				size: 20,
				totalPage: 0,
				totalSize: 0,
				dataList: [],
				userInfo:{},
				currentUser: '',
				currentUserParents: [],
				isCurrentUser: true,
				currentUserTeamLeader: {},
				showEmpty: false
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getMyTeam()
		},
		onReachBottom() {
			console.log('上拉加载更多', this.page, this.totalPage)
			if(this.page == 0) {
				return
			}
			this.getMyTeam()
		},
		methods:{
			userTap(e){
				this.currentUser = e
				this.currentUserParents.push(e)
				this.isCurrentUser = false
				this.page = 1
				this.getMyTeam()
				// this.findMyTeamLeader()
			},
			lastGradeTap(){
				this.currentUserParents.splice(this.currentUserParents.length-1, 1)
				if(this.currentUserParents.length==0){
					this.isCurrentUser = true
					this.currentUser = this.userInfo
				}else{
					this.currentUser = this.currentUserParents[this.currentUserParents.length-1]
				}
				
				
				// if(this.currentItem.referrerId == this.userInfo.id){
				// 	this.currentItem = this.userInfo
				// 	this.currentItem.nickname='我'
				// 	this.isCurrentUser = true
				// }else{
				// 	this.currentItem = this.currentItem.referrer
				// 	// this.currentItem.nickname = this.currentItem.referrer.nickname
				// }
				this.page = 1
				this.getMyTeam()
			},
			getUserInfo() {
				user.getUserInfo().then(res => {
					if (res.data.code == 10000) {
						this.userInfo = res.data.data
						this.currentUser = this.userInfo
						this.getMyTeam()
						// this.findMyTeamLeader()
					}
				})
			},
			findMyTeamLeader() {
				user.findMyTeamLeader({
					userId: this.currentUser.id
				}).then(res => {
					if (res.data.code == 10000) {
						this.currentUserTeamLeader = res.data.data
					}
				})
			},
			getMyTeam(){
				common.operateActionGet('userTreeForC/', {
					page: this.page,
					size: this.size,
					parentId: this.currentUser.id
				}).then(res => {
					uni.stopPullDownRefresh();
					if (this.page == 1) {
						this.dataList = []
					}
					var list = res.data.data.list
					this.dataList = [...this.dataList, ...list]
					this.showEmpty = this.dataList.length<1
					if (res.data.data.next) {
						this.page += 1
					} else {
						this.page = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headView{
		display: flex;
		flex-direction: column;
		// align-items: center;
		background-color: #FFFFFF;
		width: 660rpx;
		margin-left: 30rpx;
		padding: 40rpx 0;
		padding-left: 30rpx;
		margin-top: 20rpx;
		// margin: 30rpx;
		border-radius: 20rpx;
		position: relative;
		font-weight: bold;
		font-size: 32rpx;
		.lastGrade{
			align-self: flex-start;
			color: #ff6f00;
			position: absolute;
			top: 80rpx;
			right: 30rpx;
		}
		.title{
			font-size: 50rpx;
			font-weight: bold;
		}
		.timeLenght{
			font-size: 30rpx;
			margin-top: 12rpx;
		}
	}
	.item2{
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		.item2_content{
			display: flex;
			flex-direction: column;
			border-bottom: 1px solid #EFEFEF;
			padding: 30rpx;
		}
	}

</style>
